import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import {Table, Button,Row,Col,Layout, Breadcrumb,Icon} from 'antd';
import style from '../../styles/TableCss.less';
import {Link} from 'dva/router'
// import reqwest from 'reqwest';
import {reqwest_get} from '../../utils/Reqwest.js' 
// import request from '../../utils/request.js'
const {  Content, Footer } = Layout;
class Dynamic extends React.Component{
  constructor(props){
    super(props);
    this.state={
      data:[],
      dropDown:'所有渠道门店',
      columns:[{
        title:'ID',
        dataIndex:'id'
      },{
        title:'渠道名称',
        dataIndex:'regions',
        width:'20%'
      },{
        title:'运营主管',
        dataIndex:'name',
      },{
        title:'手机号',
        dataIndex:'mobile',
      },{
        title:'操作',
        key:'action',
        render:(text,record) => (
          <span>
            <Link to={{pathname:'/app/store_list',query:{'current':this.props.location.query.current,region_id:record.region_id,name:record.store,mobile:record.mobile,contact:record.contact,cantacts:record.cantact,uid:record.key}}}>门店列表</Link>
          </span>
        )
      }],
    }
  }
  // onDelete(key,e,_this){
  //   const data = _this.state.data.filter(item => item.key !== key);
  //   // _this.setState({data });
  //   reqwest({
  //     url: window.host+'/api/clues/'+key,
  //     method: 'delete',
  //     crossOrigin: true,
  //     data: {
  //       access_token:localStorage['token'],
  //     },
  //     type: 'json',
  //   }).then((data) => {
  //     console.log(data);
  //     const pagination = { ...this.state.pagination };
  //     _this.fetch()
  //   });
  // }
  handleTableChange(pagination, filters, sorter){
    const pager = { ...this.state.pagination };
    // console.log(pagination.current)
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  }
  fetch (params = {}) {
    console.log('params:', params);
    let _data=[];
    let _this=this;
    this.setState({ loading: true });
    reqwest_get('/api/regions',{
      access_token:localStorage['token'],
      page:params.page,
      pre:10
    },(data)=>{
      // console.log(data)

      if(data.status==='success'){
        const pagination = { ...this.state.pagination };
        // sessionStorage['regions']=JSON.stringify(data.regions);

        pagination.total = data.total;
        for(let i of data.list){
          _data.push({
            key:i.id,
            id:i.id,
            regions:i.name,
            name:i.user_name,
            mobile:i.user_mobile,
            // contact:i.contact,
            // store:i.name,
            // region_id:i.region_id,
            // address:i.address,
            // description:<p>门店:{i.name}&ensp;所属渠道:{i.region_name}&ensp;联系人:{i.contact}&ensp;联系电话:{i.phone}&ensp;地址:{i.address}</p>
          })
            this.setState({
              loading: false,
              data: _data,
              pagination,
            });
        }
      }
    })
    // reqwest({
    //   url: window.host+'/api/stores',
    //   method: 'get',
    //   crossOrigin: true,
    //   data: {
    //     access_token:localStorage['token'],
    //     page:params.page,
    //     pre:10
    //   },
    //   type: 'json',
    // }).then((data) => {
    //   console.log(data);
    //     const pagination = { ...this.state.pagination };
    //     sessionStorage['regions']=JSON.stringify(data.regions);
    //     pagination.total = data.total;
    //     for(let i of data.list){
    //       _data.push({
    //         key:i.id,
    //         ID:i.id,
    //         name:i.region_name,
    //         mobile:i.phone,
    //         contact:i.contact,
    //         store:i.name,
    //         region_id:i.region_id,
    //         address:i.address,
    //         description:<p>门店:{i.name}&ensp;所属渠道:{i.region_name}&ensp;联系人:{i.contact}&ensp;联系电话:{i.phone}&ensp;地址:{i.address}</p>
    //       })
    //   }
    //   this.setState({
    //     loading: false,
    //     data: _data,
    //     pagination,
    //   });
    // }).fail( (err, msg) =>{
    //    console.log(1)
    // })
  }
  componentWillMount(){
    this.fetch({page:1});

  }
  menuClick(e){
    console.log(e.item.props.value)
    this.setState({dropDown:e.item.props.value})
  }
  render(){
    const { selectedRowKeys,data,pagination,loading,dropDown,columns } = this.state;
    // const customerMemu=(
    //   <Menu onClick={this.menuClick.bind(this) } selectedKeys={[dropDown]}>
    //     <Menu.Item value='所有线索'>
    //       <a target="_blank" rel="noopener noreferrer">所有线索</a>
    //     </Menu.Item>
    //     <Menu.Item value='我的线索'>
    //       <a target="_blank" rel="noopener noreferrer" >我的线索</a>
    //     </Menu.Item>
    //     <Menu.Item value='aaaa'>
    //       <a target="_blank" rel="noopener noreferrer">aaaa</a>
    //     </Menu.Item>
    //   </Menu>
    // )
    return(
      <Layout style={{background:'#fff', height:'100%'}}>
        <Content >
          <Row >
            <Col span={7} xl={{span:7}} xs={7} style={{padding:'24px 25px 0px'}}>
              <Breadcrumb style={{fontSize:14}}>
                <Breadcrumb.Item>渠道</Breadcrumb.Item>
              </Breadcrumb>
            </Col>
            <Col xl={{span :6,offset:10}} lg={{span:6,offset:10}} md={{span:6,offset:10}} sm={{span:6,offset:10}} style={{lineHeight:'60px',textAlign:'right'}}>
              <Button ><Link to={{pathname:'/app/newcha',query:{current:this.props.location.query.current,state:'新建'}}}>新建渠道</Link></Button>
            </Col>
          </Row>
          <Layout className={`${style.tb_serbor}`}>
            <Row type='flex' className={`${style.tb_ser}`}>
              <Col span={6}>

              </Col>
              <Col span={7} offset={11} style={{textAlign:'right'}}>
                
              </Col>
            </Row>
            <Table columns={columns}
              dataSource={data} onRowClick={this.handleRowClick}
              pagination={pagination}
              loading={loading}
              onChange={this.handleTableChange.bind(this)}
              
            />
          </Layout>
        </Content>
      </Layout> 
    )
  }
}
              
//expandedRowRender={record => <div>{record.description}</div>}
// <Input.Search 
                //   placeholder="input search text"
                //   style={{ width: 200 }}
                //   onSearch={value => console.log(value)}
                //  />
function mapStateToProps(state) {
  return { channels: state.channels };
}
export default connect(mapStateToProps)(Dynamic)
